<template>
  <div>
    <Comment/>
    <Pagination/>
  </div>
</template>

<script setup>
import Comment from "@/components/comment/Comment.vue";
import Pagination from "@/components/comment/Pagination.vue";
import {watch} from "vue";
import {useRoute} from "vue-router";
import {useStore} from "vuex";
import {
  SET_COMMENT_QUERY_BLOG_ID,
  SET_COMMENT_QUERY_PAGE,
  SET_COMMENT_QUERY_PAGE_NUM,
  SET_PARENT_COMMENT_ID
} from "@/store/mutations-types";

const props = defineProps({
  page: {
    type: Number,
    required: true
  },
  blogId: {
    type: Number,
    required: false
  }
})

const store = useStore()

function init() {
  //重置评论表单位置
  store.commit(SET_PARENT_COMMENT_ID, -1)
  store.commit(SET_COMMENT_QUERY_PAGE, props.page)
  store.commit(SET_COMMENT_QUERY_BLOG_ID, props.blogId)
  store.commit(SET_COMMENT_QUERY_PAGE_NUM, 1)
  store.dispatch('getCommentList')
}

init()

const route = useRoute()
//在博客文章路由到其它含有评论的页面时，要重新获取评论
watch(route, () => {
  init()
}, {immediate: true})

</script>
